<template>
	<view class="checkin-container">
		<!-- 头部信息区域 -->
		<view class="header">
			<image class="avatar" src="/static/avatar-default.png"></image>
			<view class="user-info">
				<view class="user-name">{{nickName}}</view>
				<view class="user-stats">
					<view class="stat-item">打卡第{{checkInTotalCount}}天</view>
					<view class="stat-item">读了{{bookRecordCount}}本</view>
					<view class="stat-item">{{formatTime(time)}}</view>
				</view>
			</view>
			<button class="share-btn" @click="handleShare">分享打卡</button>
		</view>
		<!-- 阅读书籍信息区域 -->
		<view class="reading-section">
			<view class="section-title">今天读了0本书</view>
			<view class="books-info">读了0本</view>
			<view class="books-list">
				<view class="book-item" v-for="(book, index) in books" :key="index">
					<image class="book-cover" :src="book.cover"></image>
					<view class="book-name">{{ book.name }}</view>
				</view>
			</view>
		</view>
		<!-- 补打卡按钮区域 -->
		<button class="supplement-btn" @click="handleSupplement">+ 补打卡</button>
	</view>
</template>

<script>
	import * as BookRecordApi from '@/api/bookRecord.js'
	export default {
		data() {
			return {
				id: '',
				avatar: '',
				bookRecordCount: 0,
				checkInTotalCount: 0,
				time: '',
				nickName: '',
				reading: {},
			};
		},
		onLoad(option) {
			this.id = option.id
			this.avatar = option.avatar
			this.bookRecordCount = option.bookRecordCount
			this.checkInTotalCount = option.checkInTotalCount
			this.time = option.time
			this.nickName = option.nickName
			this.BookRecordApi()
		},
		methods: {

			formatTime(recordTime) {
				if (!recordTime) return '';
				const recordTimestamp = new Date(recordTime).getTime();
				const nowTimestamp = new Date().getTime();
				const diff = nowTimestamp - recordTimestamp;
				const fiveMinutes = 5 * 60 * 1000;

				if (diff < fiveMinutes) {
					return '刚刚';
				}

				const recordDate = new Date(recordTime).toDateString();
				const today = new Date().toDateString();
				const yesterday = new Date(nowTimestamp - 24 * 60 * 60 * 1000).toDateString();

				if (recordDate === today) {
					return '今天';
				} else if (recordDate === yesterday) {
					return '昨天';
				} else {
					return '2天前';
				}
			},
			async BookRecordApi() {
				const resp = await BookRecordApi.getBookReadingProgramDetail(this.id)
				if (resp.code === 0 && resp.data) {
					this.reading = resp.data
				}
			},

			handleShare() {
				// 分享打卡逻辑，比如调用小程序分享 API 等，UniApp 可使用 uni.share 相关方法
				uni.showToast({
					title: "分享打卡功能待实现",
					icon: "none",
				});
			},
			handleSupplement() {
				// 补打卡逻辑
				uni.showToast({
					title: "补打卡功能待实现",
					icon: "none",
				});
			},
		},
	};
</script>

<style>
	/* 容器整体样式 */
	.checkin-container {
		background-color: #fff;
		border-radius: 12px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
		margin: 16px;
		padding: 16px;
	}

	/* 头部样式 */
	.header {
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}

	.avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		background: #f0f0f0;
		margin-right: 20rpx;
	}

	.user-info {
		margin-left: 12px;
	}

	.user-name {
		font-size: 16px;
		font-weight: bold;
		color: #333;
	}

	.user-stats {
		display: flex;
		margin-top: 4px;
	}

	.stat-item {
		font-size: 12px;
		color: #999;
		margin-right: 12px;
	}

	.share-btn {
		margin-left: auto;
		background-color: #409eff;
		color: #fff;
		font-size: 14px;
		padding: 8px 16px;
		border-radius: 8px;
		border: none;
	}

	/* 阅读书籍区域样式 */
	.reading-section {
		margin-top: 20px;
	}

	.section-title {
		font-size: 16px;
		font-weight: bold;
		color: #333;
		margin-bottom: 8px;
	}

	.books-info {
		font-size: 14px;
		color: #666;
		margin-bottom: 12px;
	}

	.books-list {
		display: flex;
		flex-wrap: wrap;
	}

	.book-item {
		width: 48%;
		margin-right: 4%;
		margin-bottom: 12px;
		text-align: center;
	}

	.book-cover {
		width: 100px;
		height: 120px;
		border-radius: 8px;
	}

	.book-name {
		margin-top: 4px;
		font-size: 14px;
		color: #666;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* 补打卡按钮样式 */
	.supplement-btn {
		background-color: #fff;
		color: #f00;
		border: 1px solid #f00;
		font-size: 16px;
		padding: 10px 20px;
		border-radius: 20px;
		margin-top: 20px;
	}
</style>